<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../align/jquery.align.js" type="text/javascript"></script>
<script src="../../ux.popdown/jquery.ux.popdown.js" type="text/javascript"></script>
<link href="../../ux.button/jquery.ux.button.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.button/jquery.ux.button.js" type="text/javascript"></script>
<title>jquery.ux.button</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">
#button-menu {
	height: 22px;
	float: left;
	}
.ux-popdown-div {
	border: 1px solid #707070;
	margin-top: -1px;
	height: 240px;
	width: 160px;
	overflow: auto;
	}
#popdown-menu {
	padding: 0;
	margin: 0;
	border: 1px solid #FFF;
	background: #EEE;
	}
#popdown-menu li {
	list-style: none;
	text-align: left;
	padding: 2px 6px;
	margin: 0;
	font-size: 10px;
	cursor: pointer;
	}
#popdown-menu hr {
	border: 0;
	margin: 0;
	padding: 0;
	background: #CCC;
	height: 1px;
	}
.popdown-menu-hover {
	background: #FFC;
	}
.popdown-menu-selected {
	background: #4D6FD9;
	color: #FFF;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	$('#button-menu').button().popdown({
		align: "left outside",
		classes: { open:"ux-button-checked" },
		html: $('#popdown-menu')
		});
	// add menu and events
	$('#popdown-menu')
		.bind("mouseover mouseleave click",{ $selected:$([]), $active:$([]) }, function( ev ){
			var $li = $( ev.target ).closest("li");
			if ( $li.length && ev.type == "click" ){
				ev.data.$selected.removeClass("popdown-menu-selected");
				ev.data.$selected = $li.addClass("popdown-menu-selected");
				$('#button-menu').ux("popdown.hide")
					.ux("button.content", $li.html() +'&nbsp;&#x25BC;' );
				return;
				}
			ev.data.$active.removeClass("popdown-menu-hover");
			if ( ev.type == "mouseover" )
				ev.data.$active = $li.addClass("popdown-menu-hover");
			});
	});
</script>

<h2>ux.button / select</h2>
<p>Choose a favorite team: 
	<div id="button-menu">Choose Team...&nbsp;&#x25BC;</div>	
	</p>
<div style="display:none">
	<ul id="popdown-menu">
		<li>Boston Red Sox</li>
		<li>New York Yankees</li>
		<li>Tampa Bay Rays</li>
		<li>Toronto Blue Jays</li>
		<li>Baltimore Orioles</li>
		<hr />	
		<li>Detroit Tigers</li>
		<li>Minnesota Twins</li>
		<li>Chicago White Sox</li>
		<li>Kansas City Royals</li>
		<li>Cleveland Indians</li>
		<hr />
		<li>Los Angeles Angels</li>
		<li>Texas Rangers</li>
		<li>Seattle Mariners</li>
		<li>Oakland Athletics</li>
		<hr />
		<li>Philadelphia Phillies</li>
		<li>Atlanta Braves</li>
		<li>Florida Marlins</li>
		<li>New York Mets</li>
		<li>Washington Nationals</li>
		<hr />
		<li>St. Louis Cardinals</li>
		<li>Chicago Cubs</li>
		<li>Milwaukee Brewers</li>
		<li>Cincinnati Reds</li>
		<li>Houston Astros</li>
		<li>Pittsburgh Pirates</li>
		<hr />
		<li>Los Angeles Dodgers</li>
		<li>Colorado Rockies</li>
		<li>San Francisco Giants</li>
		<li>San Diego Padres</li>
		<li>Arizona Diamondbacks</li>
		</ul>
	</div>

</body></html>